<template>
    <div>
        <div role="treeitem" tabindex="0" draggable="false" 
         :class="active_class1 == depart.id ? 'el-tree-node is-expanded is-focusable is-current':'el-tree-node is-expanded is-focusable'"
         aria-expanded="true"
         style="margin-left:10px;">
            <div class="el-tree-node__content" style="padding-left: 0px;">
                <span class="el-tree-node__expand-icon el-icon-caret-right expanded"></span>
                <span data-id="553696" class="el-tree-node__label">
                    <span v-if="isFolder" @click="toggle()" 
                     :class="active_class2 == depart.id ? '2el-tree-node__label selected':'2el-tree-node__label'">
                        <span class="fa fa-minus-square-o padd" v-show="open"></span>
                        <span class="fa fa-plus-square-o padd" v-show="open==false"></span>
                    </span>
                    <span :class="active_class2 == depart.id ? '2el-tree-node__label selected':'2el-tree-node__label'"
                     v-else><span class="fa fa-minus-square-o padd"></span></span>

                    <span data-id="8"
                     :class="active_class2 == depart.id ? '2el-tree-node__label selected':'2el-tree-node__label'">
                        <span class="el-tree-node-label" @click="get_department(depart.name,depart.id)">
                            {{'id:' + depart.id }}
                            {{depart.name}}（{{depart.child_count ? depart.child_count : 0}}）
                        </span>
                    </span>
                    
                </span>
            </div>
            <div role="group"
             class="el-tree-node__children"
             style="padding-left:15px;"
             v-show="open" v-if="isFolder">
                <treelist_read v-for="(val, index) in depart.child"
                 :key="index" :depart="val" @get_department="get_department"></treelist_read>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'Treelist',
    props: ['depart'],
    data() {
        return {
            open: false,    // 展开状态
            depart_id:0,    //部门id
            active_class1:-1,   //浅蓝色底色
            active_class2:-1,   //蓝色字体
        }
    },
    computed: {
        // 判断是否有孩子
      isFolder: function() {
        return this.depart.child && this.depart.child.length;
      }
    },
    methods: {
        // 展开开关
        toggle() {
            if (this.isFolder) {
                this.open = !this.open;  //可以更换展开状态
            }
        },
        get_department(depart_name,depart_id){
            // console.log(depart_name,depart_id);
            this.active_class1 = depart_id;
            this.active_class2 = depart_id;
            this.$emit('get_department',depart_name,depart_id);
        }
    }
}
</script>

<style>

</style>
